<template>
    <div>
      <el-row>
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
          <el-form-item label="类别名称">
            <el-input v-model="queryForm.activityCategoryName" placeholder="类别名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getListCate(queryForm)">查询</el-button>
            <el-button @click="resetCateQuery">重置</el-button>
            <el-button type="primary" plain @click="openAddCateDialog">添加</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column prop="activityCategoryName" label="名称"/>
          <el-table-column prop="activityCategoryId" label="标识"/>
          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
              <el-button @click="handleDel(scope.row)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

        <el-pagination
          background    
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4,5,6,7]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" 
          style="margin-top: 30px;"/>
    
        <el-dialog :visible.sync="cateDialogVisible" width="400px" :title="mode=='edit'?'编辑类别':'添加类别'" @closed="handleClose">
            <el-form :model="cateForm" label-position="left" label-width="60px">
                <el-form-item label="名称" prop="activityCategoryName">
                    <el-input v-model="cateForm.activityCategoryName"></el-input>
                </el-form-item>
                <el-form-item>
                <el-button @click="cancelCateDialog">取消</el-button>
                <el-button type="primary" @click="confirmSubmitCate(cateForm)">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        
    </div>
  </template>
  
<script>
  import { listCate ,addCate, removeCate ,editCate } from '@/api/root';
  import { Message, MessageBox } from 'element-ui';
  export default {
    data(){
      return{
        mode:'add',
        currentPage:undefined,
        total:undefined,
        cateDialogVisible: false,//新增类别弹窗
        queryForm:{
          activityCategoryName:'',
          pageNum: 1,
          pageSize: 5
        },
        cateForm:{},
        tableData:[{
          name:'类别1',
          status:1,
          creator:'wwz',
          start_time:'2017-01-05',
        }]
      }
    },
    methods:{
      getListCate(){
        listCate(this.queryForm).then(res=>{
          this.tableData = res.row
        }).catch(()=>{})
      },
      resetCateQuery(){},
      openAddCateDialog(){
        this.cateDialogVisible = true
        this.mode = 'add'
      },
      handleClose(){
        this.cateDialogVisible = false
      },
      confirmSubmitCate(data){
        // 添加类型
        if(this.mode == 'add'){
          addCate(data).then(res=>{
            Message.success(res.msg)
            this.cateDialogVisible = false
            this.cateForm = {}
            this.getListCate()
          }).catch(()=>{})
        }else if(this.mode == 'edit'){
          //修改类型
          editCate(data).then(res=>{
            Message.success(res.msg)
            this.cateDialogVisible = false
            this.cateForm = {}
            this.getListCate()
          }).catch(()=>{})
        }
      },
      // 删除类型
      handleDel(data){
        MessageBox.alert(`确定要删除类别<${data.activityCategoryName}>吗?`).then(()=>{
          removeCate(data.activityCategoryId).then(res=>{
            Message.success(res.msg)
            this.getListCate()
          }).catch(()=>{})
        }).catch(()=>{})
      },
      handleEdit(data){
        this.cateDialogVisible = true
        this.mode = 'edit'
        this.cateForm = JSON.parse(JSON.stringify(data))
      },
      handleSizeChange(size){
        this.queryForm.pageSize=size
        this.getListCate(this.queryForm)
      },
      handleCurrentChange(page){
        this.queryForm.pageNum=page
        this.getListCate(this.queryForm)
      },
      cancelCateDialog(){
        this.cateDialogVisible = false
        this.cateForm = {}
      }
    },
    created(){
      this.getListCate()
    }
  }
  </script>
  
  <style>
  
  </style>








<!-- [
    {
        "activityCategoryId": 1,
        "activityCategoryName": "普通活动"
    },
    {
        "activityCategoryId": 5,
        "activityCategoryName": "限时活动"
    }
] -->